/*
* xxxx科技有限公司版权所有（）.
* Copyright (c) 2019,  and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  个人中心 --- 使用状态 列表 页面
**/
<template>
  <div class="ca-list">
    <p class="ca-header">我的账号：{{phoneNUm}}</p>
    <!-- 0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消 -->
    <el-tabs @tab-click="handleTabClick" v-model="activeName">
      <el-tab-pane label="全部" name="1">
        <user-data :list="allData" @singleDetail="getSingleDetail"></user-data>
      </el-tab-pane>
      <el-tab-pane label="待支付" name="2">
        <user-data :list="waitData" @singleDetail="getSingleDetail"></user-data>
      </el-tab-pane>
      <el-tab-pane label="待使用" name="0">
        <user-data :list="waitUseData" @singleDetail="getSingleDetail"></user-data>
      </el-tab-pane>
      <el-tab-pane label="已使用" name="3">
        <user-data :list="alreadyData" @singleDetail="getSingleDetail"></user-data>
      </el-tab-pane>
      <el-tab-pane label="已失效" name="5">
        <user-data :list="invalidData" @singleDetail="getSingleDetail"></user-data>
      </el-tab-pane>
    </el-tabs>
    <!-- 脚部 tab 切换区域 -->
    <Footer-tab flag="center"></Footer-tab>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import urls from '@/api/urls'
import { getData, postData } from '@/api/'
import UserData from '@/components/UserData/' // 列表系列组件
import FooterTab from '@/views/FooterTab/' // 底部组件

export default {
  name: 'UseList',
  props: {},
  components: { UserData, FooterTab },
  data() {
    return {
      timer: null, // 循环列表更新数据
      phoneNUm: '',
      allData: [], // 全部  1
      waitData: [], // 待支付2
      waitUseData: [], // 待使用0
      alreadyData: [], // 已使用3
      invalidData: [], // 已失效5
      activeName: '1'
    }
  },
  watch: {},
  mounted() {
  },
  created() {
    window.onpopstate = function () {}
    this.phoneNUm = localStorage.getItem('phoneNum')
    this.getOrderList() // 获取订单 列表页
    console.log('this.$route.params.id---------', this.$route.params.id)
  },
  methods: {
    /**
     *@Description
     *@Return 加油券 使用状态 tab 切换 事件监听.
     **/
    handleTabClick() {
      this.timer && clearTimeout(this.timer)
      this.getOrderList()
    },
    /**
     *@Description
     *@Return 数据列表 - 子组件 触发事件 监听 --- 跳转到详情页.
     **/
    getSingleDetail(e) {
      console.log('跳转到详情页--------', e)
      this.$router.push({ name: 'OrderDetail', params: { id: e.orderId } })
    },
    /**
     *@Description  0->待使用、 2->未支付、 3->已使用、 4->退款成功、 5->取消
                    0->待使用、 2->待支付、 3->已使用、 4->退款成功、 5->已取消
     *@Return 获取 订单详情 - 列表.
     **/
    getOrderList() {
      const sta = this.activeName
      const params = {
        type: sta,
        phone: localStorage.getItem('phoneNum') || '18901516825', // 手机号
      }
      getData(params, urls.userUrl).then(res => {

        if (sta == 1) {                 // 全部  1
          this.allData = res.result
        } else if (sta == 2) {          // 待支付2
          this.waitData = res.result
        } else if (sta == '0') {        // 待使用0
          this.waitUseData = res.result
        } else if (sta == 3) {            // 已使用3
          this.alreadyData = res.result
        } else if (sta == 5) {            // 已失效5
          this.invalidData = res.result
        }

        // this.invalidData.push(val)      // 已失效
        // this.alreadyData.push(val)      // 已使用
        // this.waitUseData.push(val)      // 待使用
        // this.waitData.push(val)         // 待支付
        this.timer = setTimeout(() => {
          this.getOrderList()
        }, 60000)
        console.log('个人中心-------------', res.result)
      })
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer)
  },
}
</script>
<style lang="scss" scoped>
.ca-list {
  margin: 0 auto;
  padding-bottom: 60px;
}
.ca-header {
  font-size: 16px;
  padding: 15px;
}
/* tab 组件 top 部分 */
::v-deep .el-tabs__nav-wrap {
  padding: 0 15px;
}
::v-deep .el-tabs__nav {
  float: none;
}
::v-deep .el-tabs__item {
  padding: 0 15px;
}
</style>
